<template>
<div>
  <ul>
    <li v-for="(item,index) in info" @click="clicktype(index,item)"
        class="van-hairline--bottom grid van-hairline--right"
    >
            <span class="my-icon" v-if="index===0" >&#xe612;</span>
            <span class="my-icon" v-if="index===1" >&#xe61d;</span>
            <span class="my-icon" v-if="index===2" >&#xe610;</span>
            <span class="my-icon adjust" v-if="index===3" >&#xe631;</span>
            <span class="my-icon" v-if="index===4" >&#xe6ff;</span>
            <span class="my-icon" v-if="index===5" >&#xe6c6;</span>
            <span class="my-icon" v-if="index===6" >&#xe616;</span>
            <span class="my-icon" v-if="index===7" >&#xfd58;</span>


<!--      <van-icon name="chat-o" badge="99+" class="tips" size="30"/>-->
      <span class="tagtext">{{item.typename}}</span>
    <span class="tagtext2">10490话题 今日32贴</span>


    </li>
  </ul>
</div>
</template>

<script>
export default {
name: "articletype",
  props:{'info':{
    type:Array,
    default:[]},

},
methods:{
  clicktype(index,item){
    console.log(index);
    this.$router.push('/articletype/'+index)
  }
}
}
</script>

<style scoped>

.grid{
  display: inline-block;
  width: 50%;
  height: 50px;
  background-color: white;
  position: relative;
  cursor: pointer;
  /*border-bottom: 0.1px solid #c0c0c0;*/
  /*border-right: 0.1px solid #c0c0c0;*/
  margin-bottom: 3px;
  padding-top: 9px;
}
.tips{
  width: 50px;
  /*height: 50px;*/
  margin-top: 10px;
  text-align: center;
}
.van-info{
  right: 10px;
}
.tagtext{
position: relative;
right: -11px;
text-align: justify;
width: 82px;
font-size: 14px;
color: black;
top: -15px;
}
.tagtext2{
  position: absolute;
font-size: 10px;
color: green;
top: 29px;
left: 57px;
font-weight: 2;}
.my-icon {
  font-family: "my-icon" !important;
  font-size: 30px;
  /*font-style: normal;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*color: wheat;*/
  margin-left: 16px;
  color: #1CB194;
}
.adjust{
  margin-left: 12.1px;
}

</style>